<template>
 <div>
  <div id="shop">
    <!-- 头部 -->
    <div class="head">
      <span>购物车</span>
      <span>编辑</span>
    </div>
    <!-- 商品列表 -->
    <div class="shoplist">
      <shoplists></shoplists>
    </div>
  </div>
  <tabbar></tabbar>
  </div>
</template>

<script>
import shoplists from './Shoplist'
import tabbar from '../../components/tabbar/tabbar';
export default {
  inject:['reload'],
  components:{shoplists,tabbar},
  mounted(){
    // console.log(this.$store.state.shopcart);
    this.reload();
    // this.$root.reload()
  }
};
</script>

<style lang="less" scoped>
#shop {
  background-color: red;
  overflow: hidden;
  height: 100vh;
  .head {
    height: 250px;
    overflow: hidden;
    span {
      color: rgba(255, 255, 255, 0.9);
      &:nth-child(1) {
        font-size: 35px;
        float: left;
        margin: 20px 0 5px 20px;
      }
      &:nth-of-type(2) {
        font-size: 28px;
        float: right;
        margin: 20px 20px 5px 0;
      }
    }
  }
  .shoplist {
    width: 100%;
    height: 100vh;
    background-color: #f9f5f6;
    position: relative;
    border-radius: 25px;
  }
}
</style>